<template>
	<view class="">
		<w-navbar :title="page_title" titleColor="black" backgroundColor="white"></w-navbar>
		<w-container @scrolltolower="scrolltolower">
			<template>
				<view class="top_box">
					<search v-model="search_title" @confirm="confirmSearch" @search="search" @clear="clearSearch">
					</search>
					<choose-date @setTimeFrame="setTimeFrame"></choose-date>
					<u-tabs :list="tab_list" @change="tabChange" :lineColor="PUBLIC_STYLE.color"
						:activeStyle="{'color':PUBLIC_STYLE.color}"></u-tabs>
				</view>
				<view class="content">
					<template v-if="order_list.length">
						<view class="oder_card" v-for="(item,index) in order_list" :key="index">
							<view class="order_number_box fr-ac pb-20" style="">
								<view class="">
									订单号：{{item.order_sn}}
								</view>
								<!-- <view class="iconfont icon-fuzhi1 ml-20"></view> -->
								<image @click="copy(item.order_sn,item.order_sn)" class="ml-20"
									src="../../static/image/fuzhi.png" style="width: 24rpx;height: 24rpx;"
									mode="widthFix"></image>
								<view class="date">
									{{item.create_time}}
								</view>
							</view>
							<view class="fr-ac-jsb">
								<view class="mt-20 mb-20">
									{{item.shop_name}}
								</view>
								<view class="mt-20 mb-20">
									{{item.show_status}}
								</view>
							</view>
							<view class="mb-30 goods_list" v-for="(item2,index2) in item.order_goods" :key="index2">
								<view class="fr-ac">
									<image @click="showEnlarge([ossURL + item2.image])" :src="ossURL + item2.image"
										mode=""></image>
									<view class="ml-20 fc-jsb" style="height: 100rpx;flex: 1;">
										<view class="">
											{{item2.title}}
										</view>
										<view class="fr-ac-jsb">
											<view class="fr-ac">
												<view class="mr-20">
													<text>{{item2.attrdata}}</text>
												</view>
												<view class="">
													<text>数量x</text>
													<text>{{item2.nums}}</text>
												</view>
											</view>
											<view class="">
												￥{{item2.nums}}
											</view>
										</view>
									</view>
								</view>
							</view>
							<view class="remarks_box">
								<view class="remarks_item">
									<view class="">
										备注：{{item.memo?item.memo:'--'}}
									</view>
								</view>
								<view class="remarks_item">
									<view class="">
										{{item.address_info}}
									</view>
									<!-- <view class="iconfont icon-fuzhi1"></view> -->
									<image @click="copy(item.address_info,item.order_sn)" class="ml-20"
										src="../../static/image/fuzhi.png" style="width: 24rpx;height: 24rpx;"
										mode="widthFix"></image>
								</view>
							</view>
							<view class="fr-ac-jsb mt-30" style="position: relative;">
								<view class="">
									<view class="oder_more" @click="openMore(item)"
										v-if="order_source == 1 && item.orderstate !=1">
										更多
									</view>
								</view>
								<view v-if="item.showMore" class="more_box">
									<view @click="goCancel(item)" class="">
										取消订单
									</view>
									<view @click="goDelete(item)" class="">
										删除订单
									</view>
								</view>

								<view class="fr-ac">
									<view v-if="item.expressno" class="fr-ac-jsb ml-20">
										<view @click="viewLogistics(item)" class="oder_btn">
											查看物流
										</view>
									</view>
									<view v-if="order_source == 2 && item.shippingstate == 0" class="fr-ac-jsb ml-20">
										<view @click="openDelivery(item)" class="oder_fill_btn">
											发货
										</view>
									</view>
									<template v-if="item.orderstate != 1 && item.shippingstate != 1">
										<view v-if="order_source == 1" class="fr-ac-jsb ml-20">
											<view @click="set_deliver_source(item,1,'仓库发货')" class="oder_fill_btn">
												仓库发货
											</view>
										</view>
										<view v-if="order_source == 2" class="fr-ac-jsb ml-20">
											<view @click="set_deliver_source(item,0,'退回')" class="oder_fill_btn">
												退回
											</view>
										</view>
									</template>
								</view>
							</view>
						</view>
						<template>
							<view v-show="showShade" @click="closeShade" class="shade"></view>
						</template>
						<view class="" style="height: 200rpx;"></view>
						<!-- 发货弹窗 -->
						<template>
							<u-popup :show="showDelivery" @close="closeDelivery" :closeable="true">
								<view class="popup_box">
									<view class="title">
										发货
									</view>
									<view class="title_box fr-ac-jsb">
										<view class="text">
											快递公司
										</view>
									</view>
									<view class="size_name">
										<textarea v-model="delivery_info.expressname" placeholder="填写快递公司" name="" id=""
											cols="30" rows="10"></textarea>
									</view>
									<view class="title_box fr-ac-jsb">
										<view class="text">
											快递单号
										</view>
									</view>
									<view class="size_name">
										<textarea v-model="delivery_info.expressno" placeholder="填写快递单号" name="" id=""
											cols="30" rows="10"></textarea>
									</view>
									<view class="shopping fw">
										<view class="confirm" @click="deliveryConfirm">
											确认
										</view>
									</view>
								</view>
							</u-popup>
						</template>
						<!-- 物流弹窗 -->
						<template>
							<u-popup :show="showLogistics" @close="showLogistics = false" :closeable="true">
								<view class="popup_box">
									<view class="title">
										查看物流
									</view>
									<view class="title_box fr-ac-jsb">
										<view class="text">
											快递公司
										</view>
									</view>
									<view class="">
										{{logistics_info.expressname}}
									</view>
									<view class="title_box fr-ac-jsb">
										<view class="text">
											快递单号
										</view>
									</view>
									<view class="">
										{{logistics_info.expressno}}
									</view>
									<view @click="showLogistics = false" class="shopping fw">
										<view class="confirm"
											@click="copy(`快递公司:${logistics_info.expressname}；快递单号:${logistics_info.expressno}`)">
											复制并关闭
										</view>
									</view>
								</view>
							</u-popup>
						</template>
					</template>
					<template v-else>
						<view class="fr-ac-jc" style="width: 100%;height: 50vh;">
							<u-loadmore status="nomore" nomoreText="暂无数据" />
						</view>
					</template>
				</view>
			</template>
		</w-container>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				page_title: '订单',
				tab_list: [{
						name: '全部',
						value: 0
					},
					{
						name: '待处理',
						value: 1
					},
					{
						name: '已处理',
						value: 2
					},
					{
						name: '待发货',
						value: 3
					},
					{
						name: '已发货',
						value: 4
					},
					{
						name: '已取消',
						value: 5
					},
				],

				time_type: 0,
				begin_time: '',
				end_time: '',
				search_title: '',
				show_status: 0,

				order_source: 1, //1-采购订单 2-仓库订单
				order_list: [],

				page: 1,
				total: 0,

				showShade: false,

				//发货
				showDelivery: false,
				delivery_info: {
					expressname: '',
					expressno: '',
					item: {}
				},

				//查看物流
				showLogistics: false,
				logistics_info: {}
			}
		},
		watch: {

		},
		onLoad(options) {
			this.order_source = options.order_source
			if (this.order_source == 1) {
				this.page_title = '采购订单'
			}
			if (this.order_source == 2) {
				this.page_title = '发货订单'
			}
			this.my_order_list()
		},
		onShow() {},
		onReachBottom() {
			console.log('页面级底部')
		},
		methods: {
			//复制文本
			copy(str, order_sn) {
				let that = this
				uni.setClipboardData({
					data: str,
					success: function() {
						console.log('success');
						uni.showToast({
							title: '复制成功',
							icon: 'none'
						})
						order_sn && that.set_disposestate_status(order_sn)
					},
					fail: function(err) {
						console.log(err, 'fail');
					},
					complete: function(res) {
						console.log(res, 'complete');
					}
				});
			},
			async set_disposestate_status(order_sn) {
				const res = await this.$http({
					url: '/addons/shop/api.order/set_disposestate_status',
					data: {
						order_sn
					}
				})
				if (res.code == 1) {

				}
			},
			//预览图片
			showEnlarge(urls) {
				uni.previewImage({
					current: 0, //当前预览图片url
					urls, //需要预览的图片链接列表
					loop: true //是否可循环预览
				})
			},
			scrolltolower() {
				if (this.total > this.order_list.length) {
					this.page++
					this.my_order_list()
				}
			},
			tabChange(item) {
				console.log('tab切换', item);
				this.initOrderList()
				this.show_status = item.value
				this.my_order_list()
			},
			initOrderList() {
				this.order_list = []
				this.page = 1
			},
			search() {
				this.initOrderList()
				this.my_order_list()
			},
			confirmSearch(e) {
				this.initOrderList()
				this.search_title = e
				this.my_order_list()
			},
			clearSearch(e) {
				this.initOrderList()
				this.search_title = e
				this.my_order_list()
			},
			setTimeFrame(e) {
				this.initOrderList()
				this.time_type = e.time_type
				this.begin_time = e.start_time
				this.end_time = e.end_time
				this.my_order_list()
			},
			async my_order_list() {
				uni.showLoading({
					title: '飞速加载中...'
				})
				const res = await this.$http({
					url: '/addons/shop/api.order/order_list',
					data: {
						time_type: this.time_type,
						begin_time: this.begin_time,
						end_time: this.end_time,
						search_title: this.search_title,
						show_status: this.show_status,
						order_source: this.order_source,
						page: this.page
					}
				})
				uni.hideLoading()
				if (res.code == 1) {
					this.total = res.data.total
					let list = res.data.data.map((e) => ({
						...e,
						showMore: false
					}))
					this.order_list = this.order_list.concat(list)
				}
			},
			//发货
			openDelivery(item) {
				this.showDelivery = true
				this.delivery_info.item = item
			},
			closeDelivery() {
				this.showDelivery = false
			},
			deliveryConfirm() {
				if (!this.delivery_info.expressname) {
					return uni.showToast({
						title: '请输入快递公司',
						icon: 'none'
					})
				}
				if (!this.delivery_info.expressno) {
					return uni.showToast({
						title: '请输入快递单号',
						icon: 'none'
					})
				}
				this.save_deliver_info()
			},
			async save_deliver_info() {
				uni.showLoading({
					title: '飞速加载中...'
				})
				const res = await this.$http({
					url: '/addons/shop/api.order/save_deliver_info',
					data: {
						order_sn: this.delivery_info.item.order_sn,
						expressname: this.delivery_info.expressname,
						expressno: this.delivery_info.expressno,
					}
				})
				uni.hideLoading()
				if (res.code == 1) {
					uni.showToast({
						title: '发货成功',
						icon: 'none'
					})
					this.showDelivery = false
					this.delivery_info = {
						expressname: '',
						expressno: '',
						item: {}
					}
					this.initOrderList()
					this.my_order_list()
				}
			},
			//仓库发货 / 退回
			async set_deliver_source(item, is_cangku_shipping, text) {
				uni.showModal({
					title: '提示',
					content: `是否进行${text}`,
					success: async (res) => {
						if (res.confirm) {
							uni.showLoading({
								title: '飞速加载中...'
							})
							const res = await this.$http({
								url: '/addons/shop/api.order/set_deliver_source',
								data: {
									order_sn: item.order_sn,
									is_cangku_shipping,
								}
							})
							uni.hideLoading()
							if (res.code == 1) {
								uni.showToast({
									title: '操作成功',
									icon: 'none'
								})
								this.initOrderList()
								this.my_order_list()
							}
						}
					}
				})
			},


			//点击更多
			openMore(item) {
				item.showMore = true
				this.showShade = true

			},
			goCancel(item) {
				uni.showModal({
					title: '提示',
					content: `是否取消该订单?`,
					success: (res) => {
						if (res.confirm) {
							this.cancel_order(item)
						}
					}
				})
			},
			goDelete(item) {
				uni.showModal({
					title: '提示',
					content: `是否删除该订单?`,
					success: (res) => {
						if (res.confirm) {
							this.delete_order(item)
						}
					}
				})
			},
			async cancel_order(item) {
				uni.showLoading({
					title: '飞速加载中...'
				})
				const res = await this.$http({
					url: '/addons/shop/api.order/cancel',
					data: {
						order_sn: item.order_sn,
					}
				})
				uni.hideLoading()
				if (res.code == 1) {
					uni.showToast({
						title: '取消成功',
						icon: 'none'
					})
					this.initOrderList()
					this.my_order_list()
				}
			},
			async delete_order(item) {
				uni.showLoading({
					title: '飞速加载中...'
				})
				const res = await this.$http({
					url: '/addons/shop/api.order/del_order',
					data: {
						order_sn: item.order_sn,
					}
				})
				uni.hideLoading()
				if (res.code == 1) {
					uni.showToast({
						title: '取消成功',
						icon: 'none'
					})
					this.initOrderList()
					this.my_order_list()
				}
			},
			closeShade() {
				this.showShade = false
				this.order_list.forEach(item => item.showMore = false)
			},

			viewLogistics(item) {
				this.showLogistics = true
				this.logistics_info = item
			},
		}

	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		background-color: rgb(250, 250, 252);
	}

	.top_box {
		border-bottom: 1rpx solid #eee;
		width: 100%;
		position: sticky;
		top: 0;
		left: 0;
		z-index: 999;
		box-sizing: border-box;
		padding: 20rpx 20rpx;
		background-color: white;
	}

	.oder_card {
		background-color: white;
		box-sizing: border-box;
		padding: 20rpx 30rpx;
		margin-bottom: 20rpx;

		.goods_list {
			image {
				min-width: 100rpx;
				min-height: 100rpx;
				width: 100rpx;
				height: 100rpx;
			}
		}

		text {
			color: #999;
		}

		view,
		text {
			font-size: 26rpx;
		}

		.order_number_box {
			border-bottom: 2rpx solid #eee;

			.date {
				color: #999;
				margin-left: auto;
			}

		}

		.remarks_box {
			box-sizing: border-box;
			padding: 0 20rpx;
			background-color: rgb(239, 239, 239);

			.remarks_item {
				display: flex;
				align-items: center;
				padding: 14rpx 0;
				border-bottom: 1rpx solid rgb(230, 230, 230);
				color: #888;

				image {
					min-height: 24rpx;
					min-width: 24rpx;
				}
			}

			.remarks_item:nth-last-child(1) {
				border: none;
			}
		}

		.oder_more {
			color: #888;
		}

		.oder_fill_btn,
		.oder_btn,
		.oder_btn_disable {
			padding: 10rpx 30rpx;
			border-radius: 6rpx;
		}

		.oder_btn {
			background-color: white;
			border: 2rpx solid $theme-color;
			color: $theme-color;
		}

		.oder_fill_btn {
			background-color: $theme-color;
			border: 2rpx solid $theme-color;
			color: white;
		}

		.oder_btn_disable {
			background-color: #eee;
			color: #888;
		}
	}

	.shade {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: transparent;
		z-index: 9998;
	}

	.more_box {
		position: absolute;
		bottom: -140rpx;
		left: 0;
		height: 130rpx;
		background-color: white;
		box-shadow: 2rpx 2rpx 12rpx #eee;
		box-sizing: border-box;
		padding: 0 20rpx;
		z-index: 9999;

		view {
			margin: 20rpx 0;
		}
	}

	.more_box::before {
		content: '';
		position: absolute;
		top: -12rpx;
		left: 5rpx;
		width: 0;
		height: 0;
		border-left: 12rpx solid transparent;
		border-right: 12rpx solid transparent;
		border-bottom: 12rpx solid white;
	}


	.popup_box {
		box-sizing: border-box;
		padding: 40rpx 30rpx;
		background-color: white;

		.title {
			font-size: 34rpx;
			font-weight: bold;
			text-align: center;
			width: 100%;
		}

		.size_name {
			border: 3rpx solid black;
			box-sizing: border-box;
			padding: 20rpx 20rpx;
		}


		.gooods_size {

			.gooods_size_item {
				width: 21%;
				margin: 10rpx 2%;
				padding: 8rpx 0;
				text-align: center;
				border: 2rpx solid #eee;

				&.check {
					background-color: $theme-color;
					color: white;
				}
			}


		}

		.title_box {
			margin: 30rpx 0;

			.text {
				font-weight: bold;
			}
		}

		.shopping {
			margin-top: 40rpx;
			width: 100%;
			height: 70rpx;

			.confirm {
				line-height: 70rpx;
				text-align: center;
				width: 100%;
				background-color: $theme-color;
				color: white;
			}
		}

		.add_img {
			margin: 40rpx 0;
			width: 200rpx;
			height: 200rpx;
			border: 2rpx dashed #eee;

			image {
				margin: 15rpx 40rpx;
				width: 120rpx;
				height: 120rpx;
			}

			.iconfont {
				width: 120rpx;
				height: 120rpx;
				line-height: 120rpx;
				margin: 15rpx 40rpx;
				text-align: center;
				font-size: 70rpx;
				color: #888;
			}

			.add_text {
				font-size: 24rpx;
				color: #888;
				text-align: center;
			}
		}
	}
</style>